<template>
    <div>
        <button @click="getUrls()">获取歌曲 </button> <br/>
        <button @click="playAll()">播放全部 </button><br/>
        <button @click="pre()">上一首</button><br/>
        <button @click="next()">下一首</button><br/>
        <button @click="changeMode()">{{modeMsg[mode]}}</button>
        <audio id="player" ref="player" :autoplay="isAuto"
         controls :loop = "mode == 1" @pause="isPause = true" @play="isPause = false"
          :src="currSrc"></audio>
    </div>
</template>
<script>

export default {
 data() {
    return {
        playList:[],
        tracksIds: [],
        index: 0,
        // currTime:
        isPause: true,
        isAuto: false,
        isNext: true,
        isLoop: true,
        mode: 0,
        modeMsg: ["顺序", "单曲", "随机"],
    }
 },
 computed: {
    isPlay() {
        console.log("isPlay: "+ !this.isPause);

        return !this.isPause;
    },
    currSrc() {
        if (this.playList.length == 0){
            return "";
        }
        console.log(this.playList[this.index]);
        // console.log("tjb currSrc = " + this.playList[this.index].url);
        return this.playList[this.index].url; 
    }
 },
 methods: {

    getUrls() {
        if (this.tracksIds.length == 0){
            return;
        }
        let urlStr = this.tracksIds.toString();
        this.axios.get("song/url?id="+urlStr).then(res =>{
            // console.log(JSON.stringify(res.data));
            this.playList = [];
            this.tracksIds = [];
            var playlist = res.data.data;
            for (var i = 0; i < playlist.length; i++) {
                if (playlist[i].url != "" && playlist[i].url != null) {
                    this.playList.push(playlist[i]);
                    // console.log("tjb" + i + " url: " +playlist[i].url);
                    this.tracksIds.push[playlist[i].id]
                }
            }
            console.log(this.playList);
        })        
    }
    ,getListDetail(id) {
        this.axios.get("playlist/detail?id="+id)
            .then(res =>{
            // console.log(JSON.stringify(res.data));  
            res.data.playlist.trackIds.forEach(track => {
                this.tracksIds.push(track.id);
            });
            // this.tracksIds = res.data.playlist.trackIds;
            console.log(JSON.stringify(this.tracksIds));
        })    
        
    },
    randomSong(){
        
        this.index = Math.floor(Math.random() * this.playList.length);
        console.log("random index = " + this.index);
    },
    next(){
        this.isAuto = true;
        if (this.mode == 2) { // 随机
            this.randomSong();
            return;
        } 
         // 顺序或单曲
        this.index = this.index == this.playList.length - 1 ? 0 : ++this.index;
        
        console.log(this.tracksIds.length);

    },
    pre() {
        this.isAuto = true;
        if (this.mode == 2) {
            this.randomSong();
            return;
        }
        this.isNext = false;
        this.index = this.index == 0 ? this.playList.length - 1 : --this.index;
    },
    changeMode() {
        this.mode = this.mode == 2 ? 0 : this.mode + 1;
    },
    playAll(){

    }
 },
 watch: {
    // data(newValue, oldValue) {
        
    // }
 },
 mounted () {
    // this.getUrls();
    // this.getAblumDetail();
    this.getListDetail(6666112560);

 },
}
</script>